<template>
	<view>
		<van-action-sheet :show="show" title="请选择年龄" @close="sheetCloseManager" @cancel="sheetCloseManager">
			<view style="width: 100%;height: 400rpx; padding: 40rpx;display: flex;flex-direction: column;">
				<van-slider :min="0" :max="100" bar-height="20rpx" active-color="#82B2FF" :value="currentValue"
					use-button-slot @drag="onDrag">
					<van-tag type="primary" slot="button">{{currentValue}}</van-tag>
				</van-slider>
				
				
				<view class="tn-flex  tn-footerfixed" style="margin-top: 100rpx;">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button shape="round" 
							:backgroundColor="'tn-bg-blue'" padding="40rpx 0" width="60%"
							shadow fontBold @click="submitAgeManager">
							<text class="tn-color-white">提交</text>
						</tn-button>
					</view>
				</view>
				
			</view>
		</van-action-sheet>
	</view>
</template>

<script>
	export default {
		components: {

		},
		props: {},
		data() {
			return {
				show: false,
				currentValue: 20,
			}
		},
		methods: {
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			onDrag(event) {
				this.currentValue = event.value;
			},
			
			submitAgeManager(){
				this.close();
				this.$emit('actionEventManager','selected',this.currentValue);
			},
			sheetCloseManager(){
				this.close();
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>